<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../stylesheets/reset.css">
    <link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../stylesheets/common.css">
    <style>
        .back button{
            border: #0b2e13 solid 1px;
            border-radius: 5px;
            color:#8a6d3b;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <a class="navbar-brand" href="#">
        <img width="30" src="../images/wbb.jpeg" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="../index.html">首页</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="./posts.html">文章</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="../about.html">关于我们</a>
            </li>
        </ul>
    </div>
</nav>
<section class="content">
    <aside class="bg-info">
        <a class="nav-link text-light" href="../index.html">首页</a>
        <a class="nav-link text-danger" href="./posts.html">文章</a>
        <a class="nav-link text-light" href="../about.html">关于我们</a>
    </aside>
    <main>
        <div class="back">
            <button><a href="./posts.html">返回</a></button>
        </div>
        <div class="detail"></div>
    </main>
</section>

<script src="../js/jquery-3.5.1.js"></script>
<script src="../libs/bootstrap/js/bootstrap.bundle.js"></script>
<script>
    function searchParse(){
        var resultObj = {};
        var search = window.location.search;
        if(search && search.length > 1){
            var search = search.substring(1);
            var items = search.split('&');
            for(var index = 0 ; index < items.length ; index++ ){
                if(! items[index]){
                    continue;
                }
                var kv = items[index].split('=');
                resultObj[kv[0]] = typeof kv[1] === "undefined" ? "":kv[1];
            }
        }
        return resultObj;
    }
    const query = searchParse()
    $.ajax({
        url: `http://120.27.209.174:1010/api/v1/posts/${query.id}`,
        success(res) {
            console.log(res)
            $(".detail").html(res.detail)
        }
    })
</script>
</body>
</html>
